const path = require("path");

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {DefinPlugin} = require('webpack');

module.exports = {
    //设置模式
    //development 开发阶段，会设置development
    //production 准备打包上线的时候，设置prodyction
    mode: "development",
    //设置source-map，简历js映射文件，方便调试代码和错误
    devtool: "source-map",

    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: "js/bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.(jpe?g|png)$/,
                type: 'asset',
                generator: {
                    filename: "img/[name]_[hash:2][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 100 * 1024
                    }
                }
            },
            {
                test: /\.(woff2?|ttf|eot)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: 'font/[name]_[hash:2].[ext]'
                    }
                }
            }
        ]
    },

    //打包自动删除build(dist)文件夹
    plugins: [
        // new CleanWebpackPlugin(),

        // //dist生成html文件
        new HtmlWebpackPlugin()

        //制定模板打包
        // new HtmlWebpackPlugin({
        //     template: "./public/index.html"
        // }),

        // new DefinPlugin({
        //     BASE_URL: "'./'"
        // })
    ]
}